<template>
    <el-container class="panel-container" >
        <el-header height="50px" style="display: flex; justify-content: space-between; align-items: center">
            <div>商城管理后台 - {{shopInfo.name}}</div>
            <el-dropdown placement="bottom" trigger="click" style="cursor:pointer;"  @command="handleCommand">
                <div class="el-dropdown-link" style="display: flex;justify-content: space-between; align-items: center">
                    <img width="40" style="border-radius: 5px" v-show="userInfo.logoUrl" :src="userInfo.logoUrl">
                    <p style="margin: 0 10px">{{userInfo.userName}} [管理员]</p>
                    <i class="el-icon-arrow-down el-icon--right"></i>
                </div>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>设置</el-dropdown-item>
                    <el-dropdown-item command="logout">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-header>
        <el-container>
            <el-aside width="150px" style="background-color: rgb(84, 92, 100); overflow-x: hidden">
                <wages-side></wages-side>
            </el-aside>
            <el-main>
                <keep-alive>
                    <router-view v-if="$route.meta.keepAlive"></router-view>
                </keep-alive>
                <router-view v-if="!$route.meta.keepAlive"></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>
<script>
    import {getMyshopInfo} from "../../api/shop";
    import {getLoginInfo} from "../../api/app";
    import store from "../../store/index";

    import wagesSide from 'components/panel/side';
    export default {
        components:{
            wagesSide,
        },
        data() {
          return {
              shopInfo: {},
              userInfo: {},
              hasLoad: false,
          }
        },
        methods: {
            handleCommand(val) {
                if (val === 'logout') {
                    localStorage.clear();
                    store.commit('SET_TOKEN', '');
                    this.$router.push('/login');
                    return;
                }
            }
        },
        async created() {
            let res = await getLoginInfo();
            this.userInfo = res['userInfo'];
            this.hasLoad = true;
            store.commit('SET_USERINFO', 'id', this.userInfo.id);
            store.commit('SET_USERINFO', 'type', this.userInfo.type || 1);
            localStorage.setItem('type', this.userInfo.type);
            store.commit('SET_USERINFO', 'userName', this.userInfo.userName);
            store.commit('SET_USERINFO', 'logoUrl', this.userInfo.logoUrl);
            if (this.userInfo.type === 1 && !this.userInfo.hasShop) {
                this.$confirm('您还没有创建店铺信息, 现在去创建吧?', '提示', {
                    confirmButtonText: '确定',
                    type: 'warning',
                    closeOnClickModal: false,
                }).then(() => {
                    this.$router.push('/shop/create')
                });
                return;
            }

            if (this.userInfo.type === 1) {
                res = await getMyshopInfo();
                this.shopInfo = res['shop'];
                store.commit('SET_SHOPINFO', 'id', this.shopInfo.id);
                store.commit('SET_SHOPINFO', 'goodsCount', this.shopInfo.goodsCount);
                store.commit('SET_SHOPINFO', 'introduction', this.shopInfo.introduction);
                store.commit('SET_SHOPINFO', 'logo', this.shopInfo.logo);
                store.commit('SET_SHOPINFO', 'name', this.shopInfo.name);
                store.commit('SET_SHOPINFO', 'orderCount', this.shopInfo.orderCount);
            }
        }
    }
</script>
<style lang="less" scoped>
    .el-header {
        background-color: #fff;
        color: #0f0f0f;
        line-height: 50px;
        height: 50px;
        display: flex;
        justify-content: space-between;
    }

    .el-aside {
        background-color: #707ea1;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
    }

    .panel-container {
        height: 100vh;
    }
</style>
